<template>
  <div style="height: 100%" v-loading="loading">
    <div id="viewTitleContainers">
      <viewTitle :basicInfos="basicInfos" :bgColor="bgColor" v-if="basicInfosStatus"></viewTitle>
    </div>
    <div class="openSeadragon active">
      <!-- 切片信息 basicInfos -->

      <open-seadragon :key="newTimer" v-if="openseadragonIsShow" v-show="ifOpenseadragon" ref="openseadragon"
        :dzi-url="dziUrl" :pixelsPerMeter="1992428.7706714484" @annotation-drawing-end="annotationDrawingEnd"
        @measure-annotation-drawing-end="measureAnnotationDrawingEnd" @mh-annotation-drawing-end="mhAnnotationDrawingEnd"
        @uploadAnnotation="uploadAnnotation" @jumpToNumber="jumpToNumber" :annotationsData="annotationsDataInit"
        :AiAnnotationsData="aiAnnotationsData" :MHAnnotationsData="mhAnnotationsData" :info="info" :bgColor="bgColor"
        :tiles="tiles" :type="sourceType" :imageInfo="imageInfo" style="width: 100vw; height: 100%"
        @openseadragon-open="openseadragonOpen" @ai-annotation-drawing-end="aiAnnotationDrawingEnd" @view-zoom="viewZoom"
        @annotation-select="annotationSelect"></open-seadragon>
    </div>

    <viewer-diagnostic-basis ref="viewerDiagnosticBasis" v-show="false" @calcTotleScore="calcTotleScore" />
    <!-- 教鞭 -->
    <canvas id="ruler-overlay" v-show="isAllowDrawLine"></canvas>
    <!-- 截图 -->
    <canvas id="drawRectCanvas"></canvas>
    <canvas id="shadeCanvas"></canvas>
    <!-- 常用集合 -->
    <!-- 全部功能设置 -->
    <div class="moreBtn" title="更多功能" @click="showmoreSetting">
      <i class="el-icon-more"></i>
    </div>
    <!-- <div class="canvas_group">
      <div class="canvas_btn" @click="showSetting" :class="settingStatus ? 'clickActive' : ''">
        显示设置
      </div>
    </div> -->
    <!-- 更多功能组件 -->
    <moreSetting ref="moresettingBar" @selectBtn="selectChange"></moreSetting>
    <!-- 设置组件 -->
    <setting ref="settingBar" @changeStatus="changeStatus" @closed="closeSetting"></setting>
    <!-- 图像调节组件 -->
    <visionControl ref="visionControlBar" @changeSlider="changeSlider" @closed="closeSetting"></visionControl>
    <!-- 旋转 -->
    <div id="flip-rotate" class="btn-group text-center" v-if="rotatcontrolStatus">
      <div class="rotate">
        <div class="arrowN" title="拖拽旋转" id="arrowN" @mousemove="rotateRow">⇑</div>
        <span title="0°" data-angle="0" style="top: -1px; left: 38px;" @click="chageRotate(0)"></span>
        <span title="90°" data-angle="90" style="top: 37px; left: 76px;" @click="chageRotate(90)"></span>
        <span title="180°" data-angle="180" style="top: 75px; left: 38px;" @click="chageRotate(180)"></span>
        <span title="270°" data-angle="270" style="top: 37px; left: 0px;" @click="chageRotate(270)"></span>
      </div>
    </div>
    <!-- 自动浏览 -->
    <autoScan ref="autoScanBar" @autoScanEvent="autoScanEvent" @closed="closeAutoScan"></autoScan>
  </div>
</template>

<script>
import qs from "qs";
import _ from "lodash";
import $ from "jquery";
import jcanvasFactory from "./Viewer/jcanvas";
import html2canvas from "./Viewer/html2canvas";
import OpenSeadragon from "./components/OpenSeadragon/OpenSeadragon";//基础绘图组件
import setting from "./Viewer/common/setting";//设置组件
import visionControl from "./Viewer/common/visionControl";//图像调节组件
import moreSetting from "./Viewer/common/moreSetting";//更多功能组件
import autoScan from "./Viewer/common/autoScan";//自动浏览组件
import viewTitle from "./Viewer/common/viewTitle";//头部信息
import ViewerDiagnosticBasis from "@/templates/Viewer/ViewerDiagnosticBasis";//诊断依据
import { vxRule } from "../libs/validator";

export default {
  components: {
    OpenSeadragon,
    visionControl,
    setting,
    viewTitle,
    moreSetting,
    ViewerDiagnosticBasis,
    autoScan
  },
  data() {
    return {
      rotatcontrolStatus: false,
      newTimer: "",
      openseadragonIsShow: false,
      tiles: [
        {
          scaleFactors: [1, 4, 16],
          width: 440,
          height: 540,
        },
      ],
      sourceType:
        this.$route.query.fileName.indexOf("sdpc") >= 0 ? "IIIF" : "DZI",
      imageInfo: {
        width: 21120,
        height: 77760,
        maxLevel: 0,
        curScale: 0,
      },
      userName: this.$store.state.user.name,
      currentSuspicious: {}, //当前可疑点
      switchValue: {
        scale: true,
        zoom: true,
        disc: true,
        markLabel: true,
        AIAnalysis: false,
        patientId: true,
        navigator: true,
        net: false,
        isFlicker: false, //控制标注闪烁
        groupMark: false, //成组标注开关
      },
      biopsyList: [],
      biopsyId: this.$route.query.biopsyId,
      biopsyOriginFilename: this.$route.query.originFilename,
      biopsyName: this.$route.query.fileName,
      labelUrl: "",
      annotationsDataInit: [],
      // 标注提示
      mark: {
        warning: "",
        remark: "",
      },
      newannotations: [],
      newPic: "",
      // 组件AI数据
      AIdata: null,
      drawer: false,
      isAllowDrawLine: false,
      changeColor: -1,
      visibleDict: {
        isShowSliceInfoStatus: false, // 切片信息
      },
      pathologyServiceURL: process.env.VUE_APP_AnnotationsServiceURL,
      AnnotationsServiceURL: process.env.VUE_APP_AnnotationsServiceURL,
      ImageServiceURL: process.env.VUE_APP_ImageServiceURL,
      info: "", //病人信息
      bgColor: "", //综合分析红点绿点
      aiAnnotationsData: [], //胃镜aipoints
      annotationsData: [],
      timer: null,
      timerOne: null,
      viewZoomNumber: 1,
      diagnosisId: null,
      currentLevelLabel: null,
      loading: false,
      prevPathologyId: null,
      nextPathologyId: null,
      ifOpenseadragon: true,
      pathologyId: this.$route.query.pathologyId,
      isActive: 0,
      specimenType: null,
      dziUrl: this.pathologyServiceURL + this.$route.query.dzi,
      w: document.documentElement.clientWidth,
      h: document.documentElement.clientHeight - 50,
      mhAnnotationsData: [],
      mhAnnotationsDataDrawEnd: [],
      //

      settingStatus: false,

      //基本信息
      basicInfos: {},
      bgColor: '',
      basicInfosStatus: false,
      moresettingStatus: false,
    };
  },

  methods: {
    changeSlider(data) {// 图像调节
      if (this.$refs.openseadragon) {
        if (data.type == 'contrast') {
          this.$refs.openseadragon.onContrastSlideChange(data.e);
        } else if (data.type == 'light') {
          this.$refs.openseadragon.onLightSlideInput(data.e);
        } else if (data.type == 'gama') {
          this.$refs.openseadragon.onGamaSlideInput(data.e);
        } else if (data.type == 'red' || data.type == 'green' || data.type == 'blue') {
          this.$refs.openseadragon.onRedSlideInput(data.value);
        }
      }

    },
    closeAutoScan() {
      this.$refs.settingBar.autoScan = false
      this.settingStatus = false
      this.$refs.autoScanBar.closed()
    },
    autoScanEvent(data) {//自动浏览 事件
      this.$refs.openseadragon.moveEvent(data)
    },
    selectChange(data) {
      console.log(data)
      if (data.type == "setting") {
        if (data.status) {
          this.$refs.settingBar.open()
        } else {
          this.$refs.settingBar.closed()
        }
      } else if (data.type == "visionControl") {
        if (data.status) {
          this.$refs.visionControlBar.open()
        } else {
          this.$refs.visionControlBar.closed()
        }
      }
    },
    //诊断依据
    calcTotleScore(data) {
      console.log("data" + data)
      this.bgColor = data;
      this.basicInfosStatus = true
    },
    // 全屏
    sreenFull() {
      if (
        !document.fullscreenElement &&
        !document.msFullscreenElement &&
        !document.mozFullScreenElement &&
        !document.webkitFullscreenElement
      ) {
        let docElm = document.documentElement;
        this.changeColor = 15;
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.msRequestFullscreen) {
          // IE
          docElm = document.body; // overwrite the element (for IE)
          docElm.msRequestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          // 火狐
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          // 谷歌
          docElm.webkitRequestFullScreen();
        }
      } else if (document.exitFullscreen) {
        this.changeColor = -1;
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    },
    //旋转功能按钮
    rotateRow(ev) {
      let rect = document.getElementById("arrowN").getBoundingClientRect(); //获取元素离视图
      /*计算元素中心点位置*/
      let center = {
        x: rect.left + (rect.right - rect.left) / 2,
        y: rect.top + (rect.bottom - rect.top) / 2
      }
      //计算角度
      let deg = Math.atan2(center.y - ev.pageY, center.x - ev.pageX) * (180 / Math.PI);

      //这里用的jquery框架设置的样式
      $("#arrowN").css({
        "transform": `rotate(${deg}deg)`
      })
      // this.viewerAngle %= 360;
      // let canvasDiv = $("#vieweropenDiv canvas")[0]
      // let canvasDiv4 = $("#vieweropenDiv canvas")[3]
      // console.log($(canvasDiv))
      // $(canvasDiv).css({
      //   "transform": `rotate(${deg}deg)`
      // })
      // $(canvasDiv4).css({
      //   "transform": `rotate(${deg}deg)`
      // })
      this.$refs.openseadragon.setRotation(deg);

    },
    chageRotate(deg) {
      let value = deg
      value = deg % 360;
      $("#arrowN").css({
        "transform": `rotate(${deg}deg)`
      })

      // let canvasDiv = $("#vieweropenDiv canvas")[0]
      // let canvasDiv4 = $("#vieweropenDiv canvas")[3]
      // $(canvasDiv).css({
      //   "transform": `rotate(${deg}deg)`
      // })
      // $(canvasDiv4).css({
      //   "transform": `rotate(${deg}deg)`
      // })
      this.$refs.openseadragon.setRotation(value);


    },
    changeStatus(data) {
      if (data.type == 'autoScan') { //自动浏览
        if (data.status) {
          this.$refs.autoScanBar.open()
        } else {
          this.$refs.autoScanBar.closed()
        }
        // this.$refs.openseadragon.discShow = data.status
      } else if (data.type == 'multiScale') {  //倍率尺  zoomSliderShow
        this.$refs.openseadragon.zoomSliderShow = data.status
      } else if (data.type == 'navigaMap') {  //导航图
        this.$refs.openseadragon.toggleNav()
        this.$refs.openseadragon.navShown = data.status
      } else if (data.type == 'compareScale') {//比例尺
        this.$refs.openseadragon.compareScale = data.status
      } else if (data.type == 'dividScale') {//刻度尺
        this.$refs.openseadragon.dividScale = data.status
        this.$refs.openseadragon.changeruleStatus()
      } else if (data.type == 'gridline') {//网格
        this.$refs.openseadragon.gridline = data.status
        this.$refs.openseadragon.changegridStatus()
      } else if (data.type == 'rotateScan') { //旋转浏览
        this.rotatcontrolStatus = data.status
        this.chageRotate(0)
      }
    },
    closeSetting(type) {
      console.log(type)
      if (type == 'setting') {
        this.settingStatus = false
        this.$refs.settingBar.closed()
        this.$refs.moresettingBar.closeStatus('setting')
      } else if (type == 'visionControl') {
        console.log("点击执行")
        this.settingStatus = false
        this.$refs.visionControlBar.closed()
        this.$refs.moresettingBar.closeStatus('visionControl')
      }

    },
    //设置
    showSetting() {
      if (this.settingStatus) {
        this.settingStatus = false
        this.$refs.settingBar.closed()
      } else {
        this.settingStatus = true
        this.$refs.settingBar.open()
      }
    },
    // 更多功能
    showmoreSetting() {
      if (this.moresettingStatus) {
        this.moresettingStatus = false
        this.$refs.moresettingBar.closed()
      } else {
        this.moresettingStatus = true
        this.$refs.moresettingBar.open()
      }
    },
    addMouseWheelListener(element, callback) {
      // 接收字符串，DOM对象，JQuery对象等多种格式
      element = TypeModule.toHtmlElement(element);
      ["mousewheel", "DOMMouseScroll"].forEach((eventType) => {
        element.addEventListener(eventType, (event) => {
          event = event || window.event;
          const dy = event.wheelDelta || event.detail * -40;
          callback(dy);
        });
      }, true);
    },
    //获取强生图片宽高
    getImageInfo(filename) {
      this.$axios({
        method: "GET",
        url: `${this.AnnotationsServiceURL}/images/info/${filename}`,
      }).then((res) => {
        if (res && res.data.code === 200) {
          const result = res.data.data;
          this.imageInfo.height = result.imageHeight;
          this.imageInfo.width = result.imageWidth;
          this.imageInfo.maxLevel = result.maxLevel;
          this.imageInfo.curScale = result.curScale;
          this.tiles[0].height = result.tileHeight;
          this.tiles[0].width = result.tileWidth;
          this.newTimer = new Date().getTime();
          this.openseadragonIsShow = true;
        }
      });
    },
    getBiopsyNoPathologyId() {
      this.openseadragonIsShow = false;
      const filename = this.$route.query.fileName;
      const isSdpc = filename.endsWith("sdpc");
      this.sourceType = isSdpc ? "IIIF" : "DZI";
      this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;
      if (isSdpc) {
        this.getImageInfo(filename);
      } else {
        this.newTimer = new Date().getTime();
        this.openseadragonIsShow = true;
      }
      this.$refs.openseadragon.open(
        `${this.pathologyServiceURL}/images/${filename}.dzi`
      );
      this.ifOpenseadragon = true;
    },
    getBiopsy(id) { //获取单张切片
      const pDiagnosisType = sessionStorage.getItem("pDiagnosisType");
      // console.log("pDiagnosisType", pDiagnosisType);
      if (id != "null") {
        this.$axios({
          method: "GET",
          url: "/diagnosis/single",
          params: {
            pathologyId: id,
            pDiagnosisType: pDiagnosisType,
          },
        }).then((res) => {
          // 请求失败
          if (res.data.code !== 200) {
            throw new Error(res.data);
          }
          // 请求成功
          const result = res.data.data;
          this.basicInfos = result
          this.prevPathologyId = result.previousPathologyId;
          this.nextPathologyId = result.nextPathologyId;
          this.diagnosisId = result.id;
          this.biopsyList = result.biopsyList;
          //   this.currentPath = result.biopsyList[0];
          this.currentLevelLabel = result.currentLevelLabel;
          this.specimenType = result.specimenType;
          // 诊断详情
          this.pathologyId = id;
          result.currentCountVersusTotal = result.currentCountVersusTotal
            ? result.currentCountVersusTotal
            : "0/0";
          // 通过切片获取标注
          if (id === this.$route.query.pathologyId) {
            result.biopsyList.forEach((element, index) => {
              if (element.newFilename === this.$route.query.fileName) {
                this.getAnnotations(
                  element.id,
                  element.newFilename,
                  element.originFilename,
                  element.labelUrl,
                  index
                );
              }
            });
          } else if (
            id !== this.$route.query.pathologyId &&
            result.biopsyList.length > 0
          ) {
            // 重新获取标注
            this.getAnnotations(
              result.biopsyList[0].id,
              result.biopsyList[0].newFilename,
              result.biopsyList[0].originFilename,
              result.biopsyList[0].labelUrl
            );
          } else {
            this.ifOpenseadragon = false;
            this.labelUrl = "";
            this.annotationsDataInit = [];
            this.annotationsData = [];
            this.$message.info("该诊断无切片");
          }
          //从上一页点哪个切片 切片浏览器哪张切片类是isActive  红框
          const index = _.findIndex(this.biopsyList, {
            id: this.biopsyId,
          });
          this.isActive = index;
        });
      }
    },

    // 界面左侧，  点击获取标注 biopsyID切片Id 切片新名字 切片老名字 切片信息图片url
    getAnnotations( //获取切片图片  基础
      biopsyID,
      biopsyfileName,
      biopsyOriginFilename,
      labelUrl,
      index
    ) {
      this.biopsyName = biopsyfileName;
      this.openseadragonIsShow = false;
      if (biopsyfileName !== null && biopsyOriginFilename !== null) {
        this.biopsyId = biopsyID;
        this.biopsyOriginFilename = biopsyOriginFilename;
        this.labelUrl = labelUrl;
      }
      // 重新打开切片
      let myFile = "";
      this.biopsyList.forEach((item) => {
        if (item.id == biopsyID) {
          myFile = item.newFilename;
        }
      });
      this.dziUrl = `${this.pathologyServiceURL}/images/${myFile}.dzi`;
      const filename = biopsyfileName;
      const isSdpc = filename.endsWith("sdpc");
      this.sourceType = isSdpc ? "IIIF" : "DZI";
      if (isSdpc) {
        this.getImageInfo(filename);
      } else {
        this.newTimer = new Date().getTime();
        this.openseadragonIsShow = true;
      }
      if (index || index == 0) {
        this.isActive = index;
      } else {
        this.isActive = 0;
      }

      this.annotationsDataInit = [];
      this.annotationsData = [];

      this.$axios({
        method: "GET",
        url: `/biopsy/single/${biopsyID}`,
      }).then((resp) => {
        // 请求失败
        if (resp.data.code !== 200) {
          throw new Error(resp.data);
        }
        // 数据处理
        resp.data.data.annotationsList.forEach((ele) => {
          const temPoints = [];
          const areaInfo = {
            width: ele.extraMessageJson
              ? (ele.extraMessageJson.width * 1000000).toFixed(3)
              : "",
            height: ele.extraMessageJson
              ? (ele.extraMessageJson.height * 1000000).toFixed(3)
              : "",
            area: ele.extraMessageJson
              ? (ele.extraMessageJson.area * 1000000 * 1000000).toFixed(3)
              : "",
          };
          ele.pointsJson.forEach((item) => {
            const coord1 = ["points", item[0], item[1]];
            temPoints.push(coord1);
          });
          const object = {
            annotationId: ele.id,
            createAt: ele.createTime,
            saveUser: ele.createUserId,
            remarkOne: ele.remarkOne,
            remarkTwo: ele.remarkTwo,
            classToSet: {
              color: "#b31a1a",
              name: "胃癌",
            },
            points: temPoints,
            name: "胃癌",
            children: ele.childrenJson,
            show: true,
            saveUserName: ele.createUserName,
            type: ele.extraMessageJson.type,
            imageUrl: this.ImageServiceURL + ele.imageUrl,
            extraMessageJson: ele.extraMessageJson,
            areaInfo,
          };
          this.annotationsData.push(object);
          this.annotationsDataInit = _.cloneDeep(this.annotationsData);
        });
      });
      this.ifOpenseadragon = true;
    },
    //  open-seadragon   抛出方法   start
    openseadragonOpen() {
      let _this = this;

    },
    annotationSelect(item) {
      let _this = this;

    },
    annotationDrawingEnd(annotations) {

    },
    measureAnnotationDrawingEnd(annotations) {

    },
    //画圈请求分析
    mhAnnotationDrawingEnd(annotations) {

    },
    // 1.画画工具画笔标注， 标注完成后， 删除标注的时候触发， 2. 跳转
    aiAnnotationDrawingEnd(AIannotations) {

    },
    //  画画工具画笔标注， 点击他的时候触发
    uploadAnnotation(annotation) {

    },
    jumpToNumber(val) {

    },

    viewZoom(data) {
      this.viewZoomNumber = data.toFixed(2);
    },
    //  open-seadragon   抛出方法 end
  },
  // 在beforeDestroy()生命周期内清除定时器：
  beforeDestroy() {
    clearInterval(this.timer);
    this.timerOne = null;
    this.timer = null;
    // 移除监听回车按键
    const _this = this;
    sessionStorage.setItem("sliceAssessStatus", "false");
  },
  computed: {

    reversedLabelUrl() {
      return this.labelUrl;
    },
    sourceUrl() {
      if (this.$route.query.fileName.indexOf("sdpc") >= 0) {
        return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}`;
      }
      return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}.dzi`;
    },
    // dziUrl() {
    //   return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}.dzi`;
    // },
    switchValueScale() {
      return this.switchValue.scale;
    },
    switchValueZoom() {
      return this.switchValue.zoom;
    },
    switchValueNet() {
      return this.switchValue.net;
    },
  },
  watch: {
    switchValueScale(val) {
      let _this = this;
      if (val) {
        _this.$refs.openseadragon.viewer.scalebar({
          pixelsPerMeter: _this.$refs.openseadragon.pixelsPerMeter,
        });
      } else {
        _this.$refs.openseadragon.viewer.scalebar({
          pixelsPerMeter: null,
        });
      }
    },
    switchValueZoom(val) {
      let _this = this;
      _this.$refs.openseadragon.zoomSliderShow = val;
    },


    switchValueNet(val) {
      let _this = this;
      if (val) {
        _this.$refs.openseadragon.startDrawingGrid();
      } else {
        _this.$refs.openseadragon.stopDrawingGrid();
      }
    },
  },
  created() {

  },
  mounted() {
    // 验证用户登陆,登陆后才能操作
    let _this = this;

    this.loading = true;
    this.$axios({
      method: "get",
      url: "/current-user",
      headers: {
        defaultHeader: false,
        authorization: this.$route.query.authorization,
        "Content-Type": "application/x-www-form-urlencoded",
      },
    }).then(
      (res) => {
        if (res && res.data.code === 200) {
          const user = {
            id: res.data.data.id,
            name: res.data.data.name,
          };
          this.$store.commit("setUser", user);
          this.$store.commit("setPropertyGeneral", {
            key: "authorization",
            value: this.$route.query.authorization,
          });
          jcanvasFactory($, window);
          this.loading = false;
          // console.log(!this.pathologyId);
          if (this.pathologyId == "null") {
            this.visibleDict.isShowSliceInfoStatus = true;

            this.getBiopsyNoPathologyId();
          } else {
            this.getBiopsy(this.pathologyId);
            this.visibleDict.isShowSliceInfoStatus = false;
          }
        } else {
          this.$message.info("用户验证失败");
          this.$store.commit("setPropertyGeneral", {
            key: "authorization",
            value: "",
          });
          this.$router.push("/login");
        }
      },
      (err) => {
        this.$message.info(`用户验证失败  ${err.response.data.message}`);
        this.$store.commit("setPropertyGeneral", {
          key: "authorization",
          value: "",
        });
        this.$router.push("/login");
      }
    );
    this.$store.commit("setPropertyGeneral", {
      key: "authorization",
      value: this.$route.query.authorization,
    });

    const { clientWidth } = document.body;
    const { clientHeight } = document.body;
    // 更新canvas宽高
    $("#drawRectCanvas").attr("width", clientWidth);
    $("#drawRectCanvas").attr("height", clientHeight);
    $("#shadeCanvas").attr("width", clientWidth);
    $("#shadeCanvas").attr("height", clientHeight);
    $("#shadeCanvas").hide();
    $("#drawRectCanvas").hide();



  },
  destroyed() {
    console.log("destroyed");
    // this.wbClient.close();
  },
};
</script>

<style scoped lang="scss">
//更多设置
.moreBtn {
  position: absolute;
  top: 90px;
  right: 30px;
  background: rgba(0, 0, 0, .5);
  width: 46px;
  height: 46px;
  line-height: 46px;
  border-radius: 46px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  z-index: 999;
}

// 标题
#viewTitleContainers {
  position: relative;
  height: 60px;
  background: rgba(255, 255, 255, .9);
  z-index: 999;
  box-shadow: 0 6px 2px -2px rgba(0, 0, 0, .1);
}

//旋转
.btn-group {
  width: 96px;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  bottom: 80px;
  left: 200px;

  .rotate {
    padding: 10px;
    position: relative;
    cursor: pointer;

    span {
      width: 8px;
      height: 8px;
      background-color: #08c;
      position: absolute;
    }

    .arrowN {
      width: 64px;
      height: 64px;
      border-radius: 32px;
      color: #000;
      font-size: 20px;
      font-weight: 700;
      border: 1px solid #000;
      text-align: center;
      line-height: 64px;
      cursor: pointer;
    }
  }
}

.openSeadragon {
  float: left;
  /* border: solid 1px #38526a;*/
  position: relative;
  top: 0px;
  height: 100vh;
  /*height: calc(100vh - 60px);*/
}

.openSeadragon.active {
  //显示 头部信息
  height: calc(100vh - 60px);
}

#drawRectCanvas {
  position: absolute;
  z-index: 500;
  left: 0;
  top: 0;
  cursor: crosshair;
}

#shadeCanvas {
  position: absolute;
  z-index: 250;
  left: 0;
  top: 0;
}

#ruler-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

::v-deep .el-dialog {
  margin-top: 100px !important;
}

::v-deep .el-image-viewer__close {
  color: #fff;
}

.canvas_group {
  position: fixed;
  z-index: 999;
  top: 60px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 900px;
  height: 60px;

  /*background-color: rgba(0, 0, 0, .5);*/
  .canvas_btn {
    display: inline-block;
    padding: 6px 8px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: rgb(58, 98, 215);
    border: none;
    border-radius: 6px;
    box-shadow: 0 6px #999;
  }

  .canvas_btn:hover {
    background-color: rgb(58, 98, 215);
  }

  .canvas_btn.clickActive {
    background-color: rgb(255, 0, 0);
  }

  .canvas_btn:active {
    background-color: rgb(58, 98, 215);
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
}
</style>
